<template>
    <div>
        <div class="oneBox">
            <div class="swiper-container" id="swiper">
      <div class="swiper-wrapper">
         <div class="swiper-slide">
            1
         </div>
         <div class="swiper-slide">
            2
         </div>
          <div class="swiper-slide">
            3
         </div>
         <div class="swiper-slide">
            4
         </div>
         <div class="swiper-slide">
            5
         </div>
      </div>
        <!-- <div class="swiper-pagination"></div> -->
       <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- <div class="swiper-pagination"></div> -->
    </div>
        </div>
    </div>
</template>

<script>
import Swiper from "swiper"
import "swiper/css/swiper.css"
    export default {
        mounted() {
            setTimeout(()=>{ 
                new Swiper(".swiper-container",{
                    // loop : true,
                    // autoplay:true,
                    speed: 2500,
                    slidesPerView: 4,
                    // paginationClickable: true,
                    spaceBetween: 30,
                    watchSlidesProgress : true,
                    // centeredSlides : true,
                    // pagination: {
                    //     el: '.swiper-pagination',
                    // },
                     navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                })
            },500)
        },
        created() {
            this.setCookie('cool','hahha')
            this.setCookie('cool2','hahha2')
        },
        methods: {
            setCookie(name,value){
                var Days = 30;
                var exp = new Date();
                exp.setTime(exp.getTime() + Days*24*60*60*1000);
                document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
            },
            getCookie(name){
                var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
                console.log(arr,'arr');
                if(arr==document.cookie.match(reg)){
                    return unescape(arr[2]);
                }else{
                    return null;
                }
            },
            delCookie(name){
                var exp = new Date();
                exp.setTime(exp.getTime() - 1);
                var cval=this.getCookie(name);
                console.log(cval,'cval');
                if(cval!=null){
                    document.cookie= name + "="+cval+";expires="+exp.toGMTString();
                } 
            },
            // clearAllCookie() {
            //     var date=new Date();
            //     date.setTime(date.getTime()-10000);
            //     var keys=document.cookie.match(/[^ =;]+(?=\=)/g);
            //     console.log("需要删除的cookie名字："+keys);
            //     if (keys) {
            //         for (var i =  keys.length; i--;)
            //           document.cookie=keys[i]+"=0; expire="+date.toGMTString()+"; path=/";
            //     }
            // }
        },
        beforeDestroy() {
            // this.delCookie('cool')
            // this.clearAllCookie()
            document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
        },
    }
</script>

<style scoped>
.swiper-container{
    width: 100%;
    height: auto;
    padding:90px 0;
    margin-left: auto;
    margin-right: auto;
}
    .oneBox{
        width: 500px;
        height: 400px;
        background: #999;
    }
    .swiper-slide{
        /* margin-top: 10px; */
        background: yellow;
        height: 200px;
    }
    .swiper-button-prev{
        background: center no-repeat url(../../assets/logo.png);
        width: 200px;
        height: 100px;
        background-size: 100% 100%;
        border: 1px solid #fff;
    }
    .swiper-button-prev::after{
        display: none;
    }
</style>